feat: Flexible Social Links - Phase 2 Frontend Implementation #5262
+956
−720
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Adds support for user profile social platforms to the platform detection utility: New platforms: - Threads (threads.net) - Bluesky (bsky.app) - Mastodon (common instances + URL pattern detection for /@username) - Roadmap (roadmap.sh) - CodePen (codepen.io) - Reddit (reddit.com) - Hashnode (hashnode.com, hashnode.dev) Also adds corresponding SocialMediaType enum values for the new platforms. Closes ENG-251
Updates TypeScript interfaces and GraphQL queries to support the new socialLinks array field: - Add UserSocialLink interface (platform, url) - Add socialLinks field to PublicProfile and UserProfile interfaces - Add socialLinks to USER_BY_ID_STATIC_FIELDS_QUERY - Add socialLinks to UPDATE_USER_PROFILE_MUTATION response - Add socialLinks to UPDATE_USER_INFO_MUTATION response - Mark individual social fields as @deprecated Legacy fields kept for backwards compatibility during migration. Closes ENG-252
Updates AboutMe components to render social links from the new array structure: - Add PLATFORM_CONFIG mapping for icons and labels - Add mapSocialLinksToDisplay() for converting socialLinks to display format - Add buildLegacySocialLinks() as deprecated fallback for legacy fields - Prefer user.socialLinks when available, fall back to legacy fields - Support all 13 platforms with proper icons - Unknown platforms fall back to generic LinkIcon Backwards compatible: existing users without socialLinks populated will still see their links from legacy fields. Closes ENG-253
Replace 13 individual social media input fields with a unified SocialLinksInput component that uses URL-based platform auto-detection. - Add SocialLinksInput component with platform detection and visual feedback - Update useUserInfoForm hook to manage socialLinks array - Update Profile settings page to use new SocialLinksInput - Add backwards compatibility for users with legacy individual fields
idoshamun
requested review from
AmarTrebinjac,
capJavert,
omBratteng and
rebelchris
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
omBratteng
reviewed
Jan 8, 2026
| return null; | ||
| } | ||
| // Map socialType enum values to our platform identifiers | ||
| const platformMap: Record<string, string> = { |
Member
There was a problem hiding this comment.
I think you can do some typescript magic here to ensure that what's defined in PLATFORM_CONFIG must be in this map
omBratteng
reviewed
Jan 8, 2026
| /** | ||
| * Platform icon and label mapping for socialLinks | ||
| */ | ||
| const PLATFORM_CONFIG: Record<string, { icon: ReactElement; label: string }> = { |
Member
There was a problem hiding this comment.
Do we need this defined twice 🙈
omBratteng
reviewed
Jan 8, 2026
| /** | ||
| * Platform icon and label mapping for socialLinks | ||
| */ | ||
| const PLATFORM_CONFIG: Record<string, { icon: ReactElement; label: string }> = { |
Member
There was a problem hiding this comment.
Also, why is there two AboutMe.tsx components? 🙈
Member
Author
|
@omBratteng haven't reviewed it yet. hence it's draft. there could be some hallucinations here |
- Create socialLink.tsx with shared PLATFORM_LABELS, PLATFORM_ICONS, and helper functions - Add SocialPlatform type for exhaustive type checking on platform configurations - Refactor SocialLinksInput, AboutMe components, and useUserInfoForm to use shared utilities - Add missing social media icons to jobs page SocialMediaIconMap - Reduce code duplication by ~400 lines across components
- Create generic platform system (platforms.tsx) with shared core and context-specific extensions for org/user profiles - Refactor socialLink.tsx and platformDetection.tsx to use generic platform system - Remove unused AboutMe widget component and spec file (dead code) - Add toast notifications for better user feedback in SocialLinksInput - Add code review guidelines to AGENTS.md for dead code cleanup
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR implements Phase 2 of the Flexible Social Media Links refactor on the frontend. It replaces the 13 individual social media input fields with a unified, flexible
socialLinksarray that supports auto-detection of platforms from URLs.Changes
SocialLinksInputcomponent - Single URL input with platform auto-detection and visual feedback ("GitHub detected ✓")useUserInfoFormhook - ManagessocialLinksarray with backwards compatibility for legacy fieldsAboutMecomponents prefersocialLinksarray with fallback to legacy fieldsUserSocialLinktype andsocialLinksfield to user interfacessocialLinks { platform url }to relevant queriesRelated Issues
Test plan
Preview domain
https://flexible-links-phase-2.preview.app.daily.dev